"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Bell, Clock, AlertCircle, Info, CheckCircle } from "lucide-react"

interface NotificationModalProps {
  onClose: () => void
}

export function NotificationModal({ onClose }: NotificationModalProps) {
  const notifications = [
    {
      id: 1,
      type: "important",
      title: "重要政策更新",
      content: "数字经济发展规划正式发布，涉及多个行业重大变化",
      time: "5分钟前",
      read: false,
    },
    {
      id: 2,
      type: "info",
      title: "新内容推荐",
      content: "《孙子兵法在现代商战中的应用》已更新，推荐阅读",
      time: "1小时前",
      read: false,
    },
    {
      id: 3,
      type: "success",
      title: "学习成就",
      content: "恭喜您完成商业战略模块学习，获得新徽章",
      time: "2小时前",
      read: true,
    },
    {
      id: 4,
      type: "info",
      title: "系统更新",
      content: "商界智库已更新至v2.1版本，新增AI智能推荐功能",
      time: "1天前",
      read: true,
    },
    {
      id: 5,
      type: "important",
      title: "融资动态",
      content: "您关注的AI行业有3起新融资事件，总金额超过10亿美元",
      time: "2天前",
      read: true,
    },
  ]

  const getIcon = (type: string) => {
    switch (type) {
      case "important":
        return <AlertCircle className="w-5 h-5 text-red-500" />
      case "success":
        return <CheckCircle className="w-5 h-5 text-green-500" />
      default:
        return <Info className="w-5 h-5 text-blue-500" />
    }
  }

  const getBadgeVariant = (type: string) => {
    switch (type) {
      case "important":
        return "destructive"
      case "success":
        return "default"
      default:
        return "secondary"
    }
  }

  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <Bell className="w-5 h-5" />
              <span>通知中心</span>
            </div>
            <Badge variant="outline" className="text-red-600 border-red-200">
              {notifications.filter((n) => !n.read).length} 条未读
            </Badge>
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          {notifications.map((notification, index) => (
            <div key={notification.id}>
              <div
                className={`p-4 rounded-lg border transition-colors ${
                  notification.read ? "bg-slate-50 border-slate-200" : "bg-blue-50 border-blue-200 hover:bg-blue-100"
                } cursor-pointer`}
              >
                <div className="flex items-start space-x-3">
                  <div className="flex-shrink-0 mt-1">{getIcon(notification.type)}</div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between mb-1">
                      <h4 className="font-medium text-slate-900">{notification.title}</h4>
                      <div className="flex items-center space-x-2">
                        {!notification.read && <div className="w-2 h-2 bg-red-500 rounded-full"></div>}
                        <Badge variant={getBadgeVariant(notification.type)} className="text-xs">
                          {notification.type === "important"
                            ? "重要"
                            : notification.type === "success"
                              ? "成就"
                              : "信息"}
                        </Badge>
                      </div>
                    </div>
                    <p className="text-sm text-slate-600 mb-2">{notification.content}</p>
                    <div className="flex items-center space-x-1 text-xs text-slate-500">
                      <Clock className="w-3 h-3" />
                      <span>{notification.time}</span>
                    </div>
                  </div>
                </div>
              </div>
              {index < notifications.length - 1 && <Separator className="my-2" />}
            </div>
          ))}
        </div>

        <div className="flex justify-between items-center mt-6">
          <Button variant="outline" size="sm">
            全部标记为已读
          </Button>
          <div className="flex space-x-2">
            <Button variant="outline" onClick={onClose}>
              关闭
            </Button>
            <Button size="sm">通知设置</Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
